<template>
  <div>
    <MBX name1="数据统计" name2="数据报表" />
    <el-card class="mt16">
      <div id="main" style="width: 100%; height: 500px"></div>
    </el-card>
    <div id="container"></div>
    <div id="allmap"></div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {}
  },
  created() {
    this.$API.getReportsApi().then((res) => {
      console.log(res)
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('main'))
      myChart.setOption(res)
    })
  },
  mounted() {
    var map = new BMapGL.Map('container') // 创建Map实例
    map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12) // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放

    var map2 = new BMapGL.Map('allmap') // 创建Map实例
    map2.centerAndZoom(new BMapGL.Point(118.5, 27.5), 5) // 初始化地图,设置中心点坐标和地图级别
    map2.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
    map2.setMapType(BMAP_EARTH_MAP) //  设置地图类型为地球模式
  },
  methods: {}
}
</script>
<style scoped lang="scss">
#container {
  width: 100%;
  height: 500px;
}
#allmap {
  width: 100%;
  height: 1000px;
}
</style>
